import React from 'react';
import FilterBar from './FilterBar';
import ToolGrid from './ToolGrid/ToolGrid';
import useColumnSet from './hooks/useColumnSet';
import useFilterList from './hooks/useFilterList';
import useGenGrids from './hooks/useGenGrids';


function ToolBar(props) {
    const { hasFilterBar, hasSearch, hasColumnSet, filterState, columns, pagination, originColumns, columnSet, tableState, customToolBars } = props;//* 解构非方法类型的参数
    const { addedColumns, removedColumns, refreshTable, updateColumnsDisplay } = props;//* 解构方法类型的参数
    const { columnsInPanel, updateColumnsInPanel } = useColumnSet({ originColumns, addedColumns, removedColumns, columnSet });
    const { filterList, removeFilter, clearFilter } = useFilterList({ columns: originColumns, tableState, refreshTable });
    const grids = useGenGrids({ refreshTable, customToolBars, hasSearch, hasColumnSet, columnsInPanel, updateColumnsInPanel, updateColumnsDisplay });
    return (
        <div className="mctable-toolbar">
            <div>
                {
                    hasFilterBar ? <FilterBar
                        filterState={filterState}
                        columns={columns}
                        filterList={filterList}
                        pagination={pagination}
                        removeFilter={removeFilter}
                        clearFilter={clearFilter}>
                    </FilterBar> : null
                }
            </div>
            <div className="right">
                <ToolGrid grids={grids} />
            </div>
        </div>
    );
}
export default ToolBar;